<template>
  <div>
    <div class="">
      <div class="color-222 padding-tb10 bg-dd font-s12 padding-l margin-b">添加背景</div>
      <el-form class="padding-l" :rules="rules" ref="form" :model="postForm" label-width="120px" v-loading="listLoading">
        <el-form-item required label="邀请卡背景图:" prop="uploader">
          <div class="clearfix">
          <img class="fl margin-r" :src="postForm.bgUrl" width="160" height="206" alt="">

          <el-upload
            class="fl"
          ref="avatarUpload"
          name="avatar"
          :action="imageUploadUrl"
          list-type="picture"
          :before-upload="handleBeforeUpload"
          :on-success="handleAvatarSuccess"
          :on-remove="handleAvatarRemove"
          :show-file-list="false"
          :auto-upload="true"
          style="width: 420px">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3m(建议图片尺寸为640*824)</div>
          </el-button>
        </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input type="number" v-model="postForm.sort" placeholder="请输入排序号" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="背景描述：" prop="desc">
          <el-input :maxlength=40 v-model="postForm.desc" placeholder="请输入背景描述，限40个字" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="背景颜色:" prop="backgroundColor">
          <el-radio-group v-model="postForm.bgType">
            <el-radio :label="0">背景图片偏浅色</el-radio>
            <el-radio :label="1">背景图片偏暗色</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" @click="submitForm">保存</el-button>
          <el-button type="info" @click="close">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getTheInviteInfo, inviteEditSave } from '@/api/extra'
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: {
        ibId: 0,
        sort: '',
        bgUrl: '',
        bgType: 0,
        desc: ''
      },
      listLoading: false,
      avatarList: [],
      imageUploadUrl: process.env.BASE_API + '/common/inviteCard/imageUpload',
      rules: {
        desc: [
          { required: true, message: '请输入背景描述', trigger: 'blur' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.isEdit) {
      this.theInviteInfo()
    }
  },
  methods: {
    theInviteInfo() {
      this.listLoading = true
      getTheInviteInfo(this.$route.params.ibId).then(res => {
        this.postForm = res.data.data
        if (this.postForm.bgUrl) {
          this.avatarList = [{ url: this.postForm.bgUrl }]
        }
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    handleBeforeUpload() {

    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        this.postForm.bgUrl = response.data.imageUrl
        this.$message({
          message: '上传成功!',
          type: 'info'
        })
      } else {
        this.$message({
          message: '上传失败，请稍候再试!',
          type: 'info'
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitAvatarUpload() {
      this.$refs.avatarUpload.submit()
    },
    handleAvatarRemove(file, fileList) {
      this.postForm.bgUrl = ''
      this.avatarList = []
    },
    submitForm() {
      if (!this.postForm.bgUrl) {
        this.$message({
          type: 'warning',
          message: ' 背景图片必上传! '
        })
        return
      }
      inviteEditSave(this.postForm)
        .then(res => {
          if (res.data.data.topicId) {
            this.postForm.topicId = res.data.data.topicId
          }
          this.$message({
            type: 'success',
            message: ' 保存成功! '
          })
          this.close()
        })
        .catch(err => {
          console.log(err)
        })
    },
    close() {
      this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
        const latestView = views.slice(-1)[0]
        console.log(latestView)
        if (latestView) {
          this.$router.push(latestView.path)
        } else {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style scoped>
  /*.inviteCardDetail {*/
    /*height: 550px;*/
    /*background: #fff;*/
    /*position: fixed;*/
    /*left: 25%;*/
    /*right: 25%;*/
    /*bottom: 15%;*/
    /*top: 5%;*/
    /*z-index: 120;*/
  /*}*/

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
